搭建自己的博客 - Mix Space 及Shiro主題部署教程

本文中所出現的所有網域、項目與接口在本文發出後均停止服務，僅供演示使用

最終結果呈現

前期準備

請在GitHub、Clerk、Vercel註冊自己的帳號，此處不再演示。

配置網域

搭建個人博客的第一步，便是擁有自己的網域，如果你還沒有，可以前往Dynadot購買，在此可以使用我的優惠碼8E9O6bh6c9B8y6l以獲得五美元的優惠。

此處以在Dynadot購買nskr.blog為例。

介於Cloudflare提供了諸多優化站點訪問，保障站點安全的服務，我們在此選擇將站點託管至Cloudflare。

首先需要在Cloudflare中加入自己已購買的網域，並令其掃描現有的DNS解析。

隨後複製Cloudflare提供的DNS伺服器，回到Dynadot控制台，在DNS設定處選擇網域名稱伺服器，並填入已複製的內容。

配置伺服器

在完成有關網域的相關設定後，我們便需要進行伺服器的配置。我在此選擇的是Google Cloud，在綁定貸記卡後可以獲得300美元的贈金，有效期三個月。

根據自己的需求配置和購買，我按照個人習慣選擇了Ubuntu的系統鏡像。注意在此處需開啟「允許HTTP流量」、「允許HTTPS流量」兩個選項。

在伺服器構建完畢後，我們可以獲得這一伺服器的公網IP。我們需要複製這一IP並在Cloudflare的控制台中配置網域解析，將api.nskr.blog指向自己的伺服器。（實際上，在此處無需參照影片中的操作，同時解析@.nskr.blog，因為後面需要將其解析到Vercel的伺服器上）

在完成前面的操作後，我們通過SSH連結自己的伺服器。

為了方便管理，我們可以安裝1Panel面板或寶塔面板，二者選其一即可：

#安裝1Panel
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh

#安裝寶塔面板
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

這安裝這兩個面板後都會自動安裝Docker與Docker-compose，可以通過下面的命令分別檢查：

docker -v

docker compose version

如果伺服器沒有正確輸出已安裝版本號，可以執行以下命令即可：

curl -fsSL https://get.docker.com | bash -s docker

在完成上面的步驟後，請前往伺服器控制台開放相關端口，面板所需端口可以在SSH介面查詢，博客所需端口為2323與2333：

在Google Cloud中，防火牆控制台的路徑

部署博客後端

首先，需要拉取配置文件：

# 創建目錄
cd && mkdir -p mx-space/core && cd $_

# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

並在mx-space/core目錄下新建.env文件並填入以下內容（請根據自身需要進行修改）：

有關vim的使用可以自行學習，在此僅提及與部署相關的操作：
使用vim .env創建並打開.env文件，隨後輸入i切換至insert模式，在輸入完變量後按ESC鍵進入命令模式，輸入:wq保存退出。

JWT_SECRET=nishikoriyuinishikoriyui
ALLOWED_ORIGINS= nskr.blog
ENCRYPT_ENABLE=false
ENCRYPT_KEY=

JWT_SECRET 長度不小於16個字符，不大於32個字符，用於加密JWT。
ALLOWED_ORIGINS 為被允許的域名,如果存在多個需用英文逗號分割。
ENCRYPT_ENABLE是否開啟加密，填寫true或false。
ENCRYPT_KEY為加密密鑰，如不開啟加密，則無需填寫。密鑰長度需為64位且僅包含小寫字母與數字，可通過openssl rand -hex 32命令生成。

完成上面的操作後，可通過下面的命令拉取鏡像並運行後端核心容器：

docker compose up -d

完成後端部署後，我們需要配置反向代理。使用單域名的方案可以參照官方文檔，我在此選擇借助1Panel進行雙域名配置，寶塔面板配置方法與之類似，在此不再演示。

首先需要在1Panel安裝OpenResty程式，用於網站部署。

隨後，在「網站」選擇卡中搭建靜態網站api.nskr.blog

完成網站搭建後，需要申請SSL證書，在此不再演示。

搭建完成後，選擇「配置」，並將下面的內容粘貼至網站配置文件：

## 反向代理开始
## WebSocket
location /socket.io {
  proxy_pass http://127.0.0.1:2333/socket.io; 
  proxy_set_header Host $host; 
  proxy_set_header X-Real-IP $remote_addr; 
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  proxy_set_header REMOTE-HOST $remote_addr; 
  proxy_set_header Upgrade $http_upgrade; 
  proxy_set_header Connection "upgrade"; 
  proxy_buffering off;
  proxy_http_version 1.1; 
  add_header Cache-Control no-cache; 
}
## Others
location / {
  proxy_pass http://127.0.0.1:2333; 
  proxy_set_header Host $host; 
  proxy_set_header X-Real-IP $remote_addr; 
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  proxy_set_header REMOTE-HOST $remote_addr; 
  add_header X-Cache $upstream_cache_status; 
}
## 反向代理结束

這樣配置後，
API 地址為 https://api.nskr.blog/api/v2
GateWay 為 https://api.nskr.blog/
博客後端面板為 https://api.nskr.blog/proxy/qaqdmin

部署博客前端

在此我們使用Vercel的Serverless服務進行前端的部署，這可以有效減輕我們伺服器的壓力，從而減少在伺服器上的開支。

我們首先需要在GitHub上克隆Shiro的官方倉庫。

隨後，我們需要打開Clerk，並創建新應用，獲得公鑰和私鑰。

隨後我們需要訪問博客的後端面板，在配置雲函數。

在編輯面板中填入：

名稱：shiro
引用：theme
數據類型：JSON

並複製該連結的內容並填入（此處直接引用本站點的配置文件，請根據自身需要進行修改）：

在完成上述步驟之後，前往Vercel，創建新項目,在配置頁面中，点击 Environment Variables，填入以下內容：

NEXT_PUBLIC_API_URL=https://api.nskr.blog/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://api.nskr.blog
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_•••••••••••••••••••••••••••••••••••••••••••
CLERK_SECRET_KEY=sk_test_•••••••••••••••••••••••••••••••••••••••••••

NEXT_PUBLIC_API_URL 為API地址
NEXT_PUBLIC_GATEWAY_URL 為Gateway地址
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 是Clerk獲得的公鑰
CLERKSECRET_KEY=sk_test••••••••••••••••••••••••••••••••••••••••••• 是在Clerk獲得的私鑰

隨後點擊Deploy，等待部署完成

在部署完成之後，將自己的網域名稱與之綁定，並將博客連結在Cloudflare上解析到Vercel的服務器。

就此，基本的部署便已經完成。

參考資料

Mix Space官方文檔 https://mx-space.js.org/